{% extends "app_02/layout.html" %}

{% block content %}
<div class="container">
    <div style="margin-bottom: 10px">
        <input type="button" value="新建订单1" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        <input id="btnAdd" type="button" value="新建订单2" class="btn btn-primary">
    </div>

    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
            订单列表
        </div>

        <!-- Table -->
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>订单号</th>
                <th>名称</th>
                <th>价格</th>
                <th>状态</th>
                <th>管理员</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for obj in queryset %}
            <tr id="{{ obj.id }}">
                <th>{{ obj.id }}</th>
                <th>{{ obj.oid }}</th>
                <th>{{ obj.title }}</th>
                <th>{{ obj.price }}</th>
                <th>{{ obj.get_status_display }}</th>
                <th>{{ obj.admin }}</th>
                <td>
                    <input uid="{{ obj.id }}" class="btn btn-primary btn-xs btn-edit" type="button" value="编辑">
                    <input uid="{{ obj.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除">
                </td>
            </tr>
            {% endfor %}


            </tbody>
        </table>

    </div>
    <ul class="pagination">
        {{ page_string }}
    </ul>
</div>

<!-- 新建/编辑订单对话框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新建订单</h4>
            </div>
            <div class="modal-body">
                <form id="formAdd">
                    <div class="clearfix">
                        {% for field in form %}
                        <div class="col-xs-6">
                            <div class="form-group" style="position: relative;margin-bottom: 20px">
                                <label>{{ field.label }}</label>
                                {{ field }}
                                <span class="error-msg" style="color: red;position: absolute;"></span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="btnSave" type="button" class="btn btn-primary">保 存</button>
            </div>
        </div>
    </div>
</div>

<!--删除对话框-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="alert alert-danger alert-dismissible fade in" role="alert">
            <h4>是否确定删除？</h4>
            <p style="margin:10px 0px;">删除后，所有关联的相关数据都会被删除</p>
            <p style="text-align: right;">
                <button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
            </p>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
    var DELETE_ID;
    var EDIT_ID;
    $(function () {
        bindBtnAddEvent();
        bindBtnSaveEvent();
        bindBtnDeleteEvent();
        bindBtnConfirmDeleteEvent();
        bindBtnEditEvent();
    })

    function bindBtnAddEvent() {
        // 点击新建按钮，显示对话框
        $("#btnAdd").click(function () {
            // 将正在编辑的ID设置为空
            EDIT_ID = undefined;
            // 清空对话框中的数据
            $("#formAdd")[0].reset();
            // 设置新建按钮，显示对话框
            $("#myModalLabel").text("新建订单")
            $("#myModal").modal("show");
        })
    }

    function bindBtnSaveEvent() {
        $("#btnSave").click(function () {
            // 清除错误信息
            $(".error-msg").empty();

            if (EDIT_ID) {
                // 编辑
                doEidt();
            } else {
                // 添加
                doAdd();
            }

        })
    }

    function doEidt() {
        // 向后台发送请求
        $.ajax({
            url: "/app_02/order/edit/" + "?uid=" + EDIT_ID,  //   /app_02/order/edit/?uid=13
            type: "post",
            // 将所有的东西一起处理
            data: $("#formAdd").serialize(),
            dataType: "JSON",
            success: function (res) {
                if (res.status) {
                    // alert("创建成功")
                    // 清空表单 $("#formAdd")是一个jQuery对象 -> $("#formAdd") DOM对象
                    $("#formAdd")[0].reset();

                    // 关闭对话框
                    $("#myModal").modal("hide");

                    // 刷新页面
                    location.reload();
                } else {
                    if(res.tips){
                        alert(res.tips);
                    }else {
                        // 错误信息显示在对话框
                        $.each(res.error, function (name, errorList) {
                            $("#id_" + name).next().text(errorList[0]);
                        })
                    }
                }
            }
        })
    }

    function doAdd() {
        // 向后台发送请求
        $.ajax({
            url: "/app_02/order/add/",
            type: "post",
            // 将所有的东西一起处理
            data: $("#formAdd").serialize(),
            dataType: "JSON",
            success: function (res) {
                if (res.status) {
                    // alert("创建成功")
                    // 清空表单 $("#formAdd")是一个jQuery对象 -> $("#formAdd") DOM对象
                    $("#formAdd")[0].reset();

                    // 关闭对话框
                    $("#myModal").modal("hide");

                    // 刷新页面
                    location.reload();
                } else {
                    // 错误信息显示在对话框
                    $.each(res.error, function (name, errorList) {
                        $("#id_" + name).next().text(errorList[0]);
                    })
                }
            }
        })
    }

    function bindBtnDeleteEvent() {
        $(".btn-delete").click(function () {
            // 显示删除对话框
            $("#deleteModal").modal("show");

            // 获取当前行的ID并赋值给全局变量
            DELETE_ID = $(this).attr("uid");
            // console.log(uid);

        });
    }

    function bindBtnConfirmDeleteEvent() {
        $("#btnConfirmDelete").click(function () {
            // 点击确认删除按钮，将全局变量中设置的那个要删除的ID发送到后台
            $.ajax({
                url: "/app_02/order/delete/", // => /order/delete/?uid=123
                type: "GET",
                data: {
                    uid: DELETE_ID
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        location.reload();
                    } else {
                        // 删除失败
                        alert(res.error);
                    }
                }
            })
        });

    }

    function bindBtnEditEvent() {
        $(".btn-edit").click(function () {
            // 清空对话框中的数据
            $("#formAdd")[0].reset();

            var uid = $(this).attr("uid")
            EDIT_ID = uid;
            // 发送Ajax去后段获取当前行的相关数据   /order/detail/?uid=123
            $.ajax({
                url: "/app_02/order/detail/",
                type: "get",
                data: {
                    uid: uid
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        //  将数据赋值到对话框中的标签中。
                        $.each(res.data, function (name, value) {
                            $("#id_" + name).val(value);
                        })

                        // 修改对话框的标题
                        $("#myModalLabel").text("编辑订单")

                        // 点击编辑，显示对话框
                        $("#myModal").modal("show");
                    } else {
                        alert(res.error);
                    }
                }
            })


        });
    }
</script>
{% endblock %}